<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			.title {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 文本插值 -->
			<h3>hello {{name}}</h3>
			<!-- v-html 插入html-->
			<p v-html="message"></p>
			<!-- v-bind : 绑定属性-->
			<div>
				我的座右铭是：
				<p v-bind:class="value">梦想照进现实</p>
			</div>
			<img :src="src" alt="头像" :title="tip">
			<!-- 表达式 -->
			<div>
				{{toLow?'真':'假的'}}
				{{str.toLowerCase()}}
			</div>
		</div>

		<script>
			new Vue({
				el: '#box',
				data: {
					name: 'ducky',
					message: '<h1>我来自东华理工大学，软件学院</h1>',
					value: 'title',
					tip: '我的头像',
					src: 'https://img0.baidu.com/it/u=1472391233,99561733&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
					toLow: true,
					str: 'ABCDGRFJFJKFKHFHHF'
				}
			})
		</script>
	</body>
</html>
